리액트 함수형 컴포넌트의 반환 타입 정리

1️⃣ 반환 타입 종류 및 차이점

🔹 JSX.Element

const MyComponent = (): JSX.Element => {
	return <div>Hello</div>;
};

• 가장 기본적인 JSX 반환 타입
• React.createElement() 의 반환 타입과 동일
• 실제로는 React.ReactElement<any, any>로 정의됨
• 주의점: null이나 string 같은 JSX 이외의 타입은 허용되지 않음

🔹 React.ReactElement

cosnt MyComponent = (): React.ReactElement => {
	return <h1>Title</h1>;
};

• JSX.Element와 사실상 같은 의미지만 명확하게 React 네임스페이스를 사용할 수 있음
• JSX의 구체적인 반환을 타입으로 명시할 때 사용

🔹 ReactNode

const MyComponent = (): React.ReactNode => {
	if (Math.random() > 0.5) return <div>Random</div>
	return 'Hello world';
};

• 가장 범용적인 반환 타입
• string, number, null, undefined, boolean, JSX, Fragment, 배열 등 렌더링 가능한 모든 값 포함
• 동적으로 다양한 타입의 값을 반환할 가능성이 있을 때 적합

🔹 React.FC (또는 React.FunctionComponent)

const MyComponent: React.FC = () => {
  return <div>With children prop</div>;
};

• 컴포넌트 전체에 타입 부여
• children prop이 자동 포함됨
• Props 타입도 제네릭으로 지정 가능

type Props = { name: string };

const Greet: React.FC<Props> = ({ name, children }) => {
  return (
    <div>
      Hello, {name}
      {children}
    </div>
  );
};

• children 자동 포함이 명시적이지 않음
• 반환 타입이 ReactElement | null로 제한됨

2️⃣ 타입 간의 관계 요약

3️⃣ 예제 코드 비교